<template>
	<view class="content">
		<view class="login-t">
			<image class="login-logo" :src="logoImage" mode="aspectFill"></image>
		</view>
		<view class="login-m">
			<view class="login-item">
				<input type="number" v-model="mobile" :maxlength="maxMobile" placeholder="请输入手机号码" focus placeholder-class="login-item-i-p" />
			</view>
			<view class="login-item flc">
				<input class="login-item-input" placeholder-class="login-item-i-p" type="text" v-model="code" placeholder="请输入验证码" />
				<view :class="sendCodeBtn" @click="sendCode" v-if="verification">发送验证码</view>
				<view class="btn btn-g" v-if="!verification">{{ timer }} 秒后重新获取</view>
			</view>

		</view>
		<view class="login-b">
			<!-- #ifdef H5|APP-PLUS|APP-PLUS-NVUE -->
			<view v-if="user_wx_id">
				<button :class="regButtonClass" @click="toBind()" hover-class="btn-hover">登录</button>
			</view>
			<view v-else>
				<button :class="regButtonClass" @click="login()" hover-class="btn-hover">登录</button>
				<view class="login-other flc">
					<view class="fz12 item" @click="selectLoginType">
						密码登录
					</view>
					<view class="fz12 item" @click="toReg">
						注册
					</view>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP -->
			<button :class="regButtonClass" @click="showTopTips()" hover-class="btn-hover">登录</button>
			<!-- #endif -->

		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	import Api from '@/common/api';
	import store from '@/store/index';
	import {
		goBack,
		jumpBackPage
	} from '@/config/mixins.js'
	export default {
		mixins: [goBack, jumpBackPage],
		data() {
			return {
				maxMobile: 11,
				mobile: '', // 用户手机号
				code: '', // 短信验证码
				user_wx_id: '', //授权id
				verification: true, // 通过v-show控制显示获取还是倒计时
				timer: 60, // 定义初始时间为60s
				btnb: 'btn btn-square btn-c btn-all', //按钮背景
				type: '', // 有值是第三方登录账号绑定
				isWeixinBrowser: this.$common.isWeiXinBrowser()
			}
		},
		onLoad(option) {
			if (option.user_wx_id) {
				this.user_wx_id = option.user_wx_id
				uni.setNavigationBarTitle({
					title: '绑定手机号'
				})
			}


			// H5第三方授权登录绑定
			// if (option.type && option.type === 'bind') {
			// 	this.type = option.type
			// 	uni.setNavigationBarTitle({
			// 		title: '绑定手机号'
			// 	})
			// }
		},
		computed: {
			// 验证手机号
			rightMobile() {
				let res = {}
				if (!this.mobile) {
					res.status = false
					res.msg = '请输入手机号'
				} else if (!/^1[3456789]{1}\d{9}$/gi.test(this.mobile)) {
					res.status = false
					res.msg = '手机号格式不正确'
				} else {
					res.status = true
				}
				return res
			},
			// 动态计算发送验证码按钮样式
			sendCodeBtn() {
				let btn = 'btn btn-g'
				if (this.mobile.length === this.maxMobile && this.rightMobile.status) {
					return btn + ' btn-b'
				} else {
					return btn
				}
			},
			// 动态更改登录按钮bg
			regButtonClass() {
				return this.mobile && this.mobile.length === this.maxMobile && this.code ?
					this.btnb + ' btn-b' :
					this.btnb
			},
			logoImage() {
				return '/static/missing-face.png'
			}
		},
		onShow() {
			let _this = this
			let userToken = _this.$db.get('userToken')
			if (userToken) {
				uni.switchTab({
					url: '/pages/member/index/index'
				})
				return true
			}
			_this.timer = parseInt(_this.$db.get('timer'))
			if (_this.timer != null && _this.timer > 0) {
				_this.countDown()
				_this.verification = false
			}
		},
		methods: {
			// 发送短信验证码
			sendCode() {
				if (!this.rightMobile.status) {
					this.$common.errorToShow(this.rightMobile.msg)
				} else {
					this.$common.loadToShow('发送中...')
					setTimeout(() => {
						this.$common.loadToHide()
						this.$api.sms({
							mobile: this.mobile,
							code: 'login'
						}, res => {
							if (res.status) {
								this.timer = 60
								this.verification = false
								this.$common.successToShow(res.msg)
								this.countDown() // 执行验证码计时
								// this.btnb = 'btn btn-square btn-all btn-b';
							} else {
								this.$common.errorToShow(res.msg)
							}
						})
					}, 1000)
				}
			},
			// 去注册
			toReg() {
				this.$common.navigateTo('/pages/login/register/index')
			},
			// 验证码倒计时
			countDown() {
				let auth_timer = setInterval(() => {
					// 定时器设置每秒递减
					this.timer-- // 递减时间
					uni.setStorage({
						key: 'timer',
						data: this.timer,
						success: function() {}
					})
					if (this.timer <= 0) {
						this.verification = true // 60s时间结束还原v-show状态并清除定时器
						clearInterval(auth_timer)
					}
				}, 1000)
			},
			// 登录
			login() {
				var _this = this
				if (!_this.rightMobile.status) {
					_this.$common.errorToShow(_this.rightMobile.msg)
				} else {
					// 短信验证码登录
					if (!_this.code) {
						_this.$common.errorToShow('请输入短信验证码!')
					} else {
						let data = {
							mobile: _this.mobile,
							code: _this.code
						}

						let invicode = _this.$db.get('invitecode')
						if (invicode) {
							data.invitecode = invicode
						}

						_this.$api.smsLogin(data, res => {
							if (res.status) {
								this.$db.set('userToken', res.data)
								_this.redirectHandler()
							} else {
								_this.$common.errorToShow(res.msg)
							}
						})
					}
				}
			},
			// 重定向跳转 或者返回上一个页面
			redirectHandler() {
				this.$common.successToShow('登录成功!', () => {
					this.$db.set('timer', 0)
					this.$db.del('invitecode')
					this.handleBack()
				})
			},
			// 跳转到普通登录
			toLogin() {
				uni.navigateTo({
					url: '../../login/login/index'
				})
			},
			//提交按钮
			showTopTips: function() {
				let _this = this
				if (_this.mobile == '') {
					_this.$common.errorToShow('请输入手机号码')
					return false
				}
				if (this.code == '') {
					_this.$common.errorToShow('请输入验证码')
					return false
				}
				if (_this.user_wx_id == 0) {
					_this.$common.errorToShow('登录失败，请稍后再试', function() {
						uni.navigateBack({
							delta: 1
						})
					})
					return false
				}
				var platform = 2
				//1就是h5登陆（h5端和微信公众号端），2就是微信小程序登陆，3是支付宝小程序，4是app，5是pc
				// #ifdef MP-ALIPAY
				platform = 3
				// #endif
				// #ifdef APP-PLUS||APP-PLUS-NVUE
				platform = 4
				// #endif
				var data = {
					mobile: _this.mobile,
					code: _this.code,
					platform: platform, //平台id，标识是小程序登陆的
					user_wx_id: _this.user_wx_id //微信小程序接口存不了session，所以要绑定的id只能传到前台
				}
				//有推荐码的话，带上
				var invitecode = _this.$db.get('invitecode')
				if (invitecode) {
					data.invitecode = invitecode
				}
				_this.$api.smsLogin(data, function(res) {
					if (res.status) {
						_this.$db.set('userToken', res.data)
						_this.redirectHandler()
					} else {
						//报错了
						_this.$common.errorToShow(res.msg)
					}
				})
			},
			// 公众号第三方登录账号绑定
			toBind() {
				if (this.mobile == '') {
					this.$common.errorToShow('请输入手机号码')
					return false
				}
				if (this.code == '') {
					this.$common.errorToShow('请输入验证码')
					return false
				}

				let data = {
					mobile: this.mobile,
					code: this.code,
					user_wx_id: this.user_wx_id
				}

				// 获取邀请码
				let invicode = this.$db.get('invitecode')
				if (invicode) {
					data.invitecode = invicode
				}

				this.$api.smsLogin(data, res => {
					if (res.status) {
						this.$db.set('userToken', res.data)
						this.redirectHandler()
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			// 切换登录方式
			selectLoginType() {
				this.$common.redirectTo('./index1')
			}
		}
	}
</script>

<style lang="scss">
	.content {
		/*  #ifdef  H5  */
		height: calc(100vh - 90upx);
		/*  #endif  */
		/*  #ifndef  H5  */
		height: 100vh;
		/*  #endif  */
		background-color: #fff;

		padding: 0upx 100upx;
	}

	.login-t {
		text-align: center;
		padding: 50upx 0;
	}

	.login-logo {
		width: 180upx;
		height: 180upx;
		border-radius: 20upx;
		background-color: #f8f8f8;
		/* margin: 0 auto; */
	}

	.login-m {
		margin-bottom: 100upx;
	}

	.login-item {
		border-bottom: 2upx solid #d0d0d0;
		overflow: hidden;
		padding: 10upx;
		color: #333;
		margin-bottom: 30upx;
	}

	.login-item-input {
		display: inline-block;
		flex: 1;
		box-sizing: border-box;
	}

	.login-item .btn {
		border: none;
		width: 40%;
		text-align: right;
		padding: 0;

		&.btn-b {
			background: none;
			color: #333 !important;
		}
	}

	.login-b .btn {
		color: #999;
	}

	.btn-b {
		color: #fff !important;
	}

	.login-other {
		margin-bottom: 40upx;

		.item {
			padding: 20upx 0;
		}
	}

	.btn-square {
		height: 80upx;
		line-height: 80upx;
	}
</style>
